<template>
  <table
    class="Fg-pho-table"
    :class="tableClass"
    align="center"
    cellspacing="0"
    cellpadding="0"
    border="0"
    :width="width"
    :style="newStyle"
  >
    <!-- <caption>标题</caption> -->
    <tr class="Fg-pho-table__header" v-if="$attrs.showHeader">
      <th
        class="Fg-pho-table__cell"
        v-for="(item,i) in headData"
        :key="i"
        :width="item.width"
        :style="{backgroundColor:$attrs.color}"
      >{{item.label}}</th>
    </tr>
    <tr class="Fg-pho-table__body" v-for="(item,i) in resData" :key="i" :class="trClass(i)">
      <td class="Fg-pho-table__cell" v-for="(itemm,j) in headData" :key="j" :align="itemm.align">
        <span v-if="itemm.render=='text'">{{item[itemm.prop]}}</span>
        <phone-form-tag
          v-if="itemm.render=='tag'"
          type="primary"
          :size="$attrs.size"
          :value="item[itemm.prop]"
        />
        <van-image
          v-if="itemm.render=='img'"
          style="width: 50px; height: 50px"
          :src="item[itemm.prop]"
          fit="fill"
        ></van-image>
      </td>
    </tr>
  </table>
</template>


<script>
import { comMixin } from "../../../utils/comMixins";

export default {
  name: "phone-form-table",
  mixins: [comMixin],
  mounted() {},
  computed: {
    headData() {
      return this.dataObj.head;
    },
    width() {
      return this.headData.reduce(
        (pre, next) => pre + (parseInt(next.width) || 0),
        0
      );
    },
    tableClass() {
      const size = "Fg-pho-table--" + this.$attrs.size;
      const border = this.$attrs.border ? "Fg-pho-table--border" : "";
      return `${size} ${border}`;
    },
  },

  methods: {
    trClass(i) {
      return i % 2 && this.$attrs.stripe ? "Fg-pho-table--striped" : "";
    },
  },
};
</script>

<style lang="scss" scoped>
.Fg-pho-table {
  .Fg-pho-table__header {
    color: #909399;
  }
  .Fg-pho-table__cell {
    padding-left: 10px;
    padding-right: 10px;
    line-height: 23px;
    border-bottom: 1px solid #ebeef5;
  }
  .Fg-pho-table--striped {
    background-color: #fafafa;
  }
}
.Fg-pho-table--border {
  .Fg-pho-table__header {
    .Fg-pho-table__cell {
      border-top: 1px solid #ebeef5;
    }
  }

  .Fg-pho-table__header,
  .Fg-pho-table__body {
    .Fg-pho-table__cell {
      border-left: 1px solid #ebeef5;
    }
    .Fg-pho-table__cell:last-child {
      border-right: 1px solid #ebeef5;
    }
  }
}
.Fg-pho-table--mini {
  font-size: 12px;
  .Fg-pho-table__cell {
    padding: 6px 0;
  }
}
.Fg-pho-table--small {
  font-size: 12px;
  .Fg-pho-table__cell {
    padding: 8px 0;
  }
}
.Fg-pho-table--medium {
  font-size: 14px;
  .Fg-pho-table__cell {
    padding: 10px 0;
  }
}
</style>